<template>
  <div class="absolute right-4 top-60">
    <div
      class="btn-item mb-4 px-2 py-1 text-light font-bold flex-cc rounded-md bg-dark bg-opacity-20 backdrop-blur-sm cursor-pointer hover:bg-opacity-50"
      :class="{ active: key === item.key }" v-for="item in switchRooms" @click="handleSwitch(item)">
      <span>{{ item.name }}</span>
      <img class="h-5 rotate-180 ml-1" src="@/assets/images/icon_arrow.png" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { emitter } from '@/utils/mitt'
import { storeToRefs } from 'pinia'
import { useRoomStore } from '@/stores/useRoomStore'

const store = useRoomStore()
const { switchRooms, key } = storeToRefs(store)
function handleSwitch(item: any) {
  emitter.emit('room:switch', item)
}
</script>

<style scoped lang="scss">
.btn-item {
  &.active {
    --un-bg-opacity: 0.5;
  }
}
</style>